import { Button } from "antd-mobile";
import React, { useState } from "react";
import { Navigate, useLocation, useNavigate } from "react-router-dom";
import pai from "../../../public/3.jpg";
import "./index.scss";
function Detail() {
  const location = useLocation();
  const data = location.state;
  const date = localStorage.getItem("date");
   const naviagte=useNavigate()
  const [flag, setFlag] = useState(true);
  const [flag2, setFlag2] = useState(false);
  const [flag3, setFlag3] = useState(false);
 const get1= () => {
    setFlag(true);
    setFlag3(false);
  };
  const get2 = () => {
     setFlag(false);
    setFlag2(true);
  };
  const get3 = () => {
     setFlag2(false);
    setFlag3(true);
  };
 let token = localStorage.getItem('token')
  const getLogin=()=>{
    if(!token){
      naviagte('/login')
    }
  }
  return (
    <div>
      <h2 style={{ textAlign: "center" }}>{date} 明天出发</h2>
      <div className="deleft">
        <dl style={{ marginLeft: "20px" }}>
          <dt>{data.dst}</dt>
          <dd>{data.dasn}</dd>
        </dl>
        <dl style={{ marginLeft: "20px" }}>
          <dt>
            {data.amn}
            <hr />
          </dt>
          <dd>{data.fn}</dd>
        </dl>
        <dl style={{ marginLeft: "20px" }}>
          <dt>{data.ast}</dt>
          <dd>{data.aasn}</dd>
        </dl>
      </div>

      <div className="piao">
        <div onClick={get1}>
          <p>二等座</p>
          <p>￥89.5</p>
          <p>有票</p>
        </div>
        <div onClick={get2}>
          <p>一等座</p>
          <p>￥144.5</p>
          <p>有票</p>
        </div>
        <div onClick={get3}>
          <p>无等座</p>
          <p>￥89.5</p>
          <p>有票</p>
        </div>
      </div>
       <div style={{display:'flex',justifyContent:'space-between'}}>
          <h3>优惠享票</h3>
          <h2 style={{color:'green'}} onClick={getLogin}>预定</h2>
       </div>
      <img src={pai} alt="" style={{ width: "100%", height: "200px" }} />

      <div>
        <p>为你提供其他旅行准备:</p>

        {flag && (
          <div className="list">
            <div className="list_header">
              <div className="left1">
                <dl style={{ marginLeft: "50px" }}>
                  <dt>{data.dst}</dt>
                  <dd>{data.dasn}</dd>
                </dl>
                <dl style={{ marginLeft: "50px" }}>
                  <dt>
                    {data.amn}
                    <hr />
                  </dt>
                  <dd>{data.fn}</dd>
                </dl>
                <dl style={{ marginLeft: "50px" }}>
                  <dt>{data.ast}</dt>
                  <dd>{data.aasn}</dd>
                </dl>
              </div>
            </div>
            <div className="list_bottom">
              <div className="left">{data.amn}</div>
              <div className="right">
                <span>￥{data.atp}</span>
              </div>
            </div>
          </div>
        )}

          {flag2 && (
          <div className="list">
            <div className="list_header">
              <div className="left1">
                <dl style={{ marginLeft: "50px" }}>
                  <dt>14:20</dt>
                  <dd>天津12</dd>
                </dl>
                <dl style={{ marginLeft: "50px" }}>
                  <dt>
                    {data.amn}
                    <hr />
                  </dt>
                  <dd>{data.fn}</dd>
                </dl>
                <dl style={{ marginLeft: "50px" }}>
                  <dt>18:00</dt>
                  <dd>{data.aasn}</dd>
                </dl>
              </div>
            </div>
            <div className="list_bottom">
              <div className="left">{data.amn}</div>
              <div className="right">
                <span>￥1224</span>
              </div>
            </div>
          </div>
        )}

          {flag3 && (
          <div className="list">
            <div className="list_header">
              <div className="left1">
                <dl style={{ marginLeft: "50px" }}>
                  <dt>14:20</dt>
                  <dd>上海2222</dd>
                </dl>
                <dl style={{ marginLeft: "50px" }}>
                  <dt>
                    {data.amn}
                    <hr />
                  </dt>
                  <dd>{data.fn}</dd>
                </dl>
                <dl style={{ marginLeft: "50px" }}>
                  <dt>21:00</dt>
                  <dd>{data.aasn}</dd>
                </dl>
              </div>
            </div>
            <div className="list_bottom">
              <div className="left">{data.amn}</div>
              <div className="right">
                <span>￥2144</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default Detail;
